<template>
  <div>
    <!-- hello--{{$store.state.count}} -->
    <!-- hello--{{count}}/{{count2}}/{{count3}}/{{count4}}--{{message}}--{{doubleCount}} -->
    <!-- {{count}}--{{$store.getters.doubleCount}} -->
    {{count}}
    <br/>
    <button @click="decrement">mimus</button>
    {{doubleCount}}+{{tripleCount}}=
    <!-- {{addCount}} -->
    <button @click="increment">add</button>##
    <button @click="multiply">multiply</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { INCREMENT_MUTATION,DECREMENT_MUTATION, MULTIPLY_MUTATION } from '../store/mutation-types'
import { INCREMENT_ACTION, DECREMENT_ACTION, MULTIPLY_ACTION } from '../store/action-types'

export default {
  data(){
    return {
      title: 'hello'
    }
  },
  mounted(){
    console.log(this);
  },

  methods: {
    increment(){
      this.$store.dispatch({
        type: INCREMENT_ACTION,
        payload: 100
      })
      // this.$store.commit('increment',100);
      // this.$store.commit({
      //   type: INCREMENT,
      //   payload: 100
      // });
    },
    
    decrement(){
      this.$store.dispatch({
        type: DECREMENT_ACTION,
        payload: 50
      })
    },

    multiply(){
      this.$store.dispatch({
        type: MULTIPLY_ACTION,
        payload: {
          inc:10,
          mul:2
        }
      })
    }
  },
  computed: {
    message(){
      return this.title + 'world'
    },
    ...mapGetters({
      doubleCount: 'doubleCount',
      tripleCount: 'tripleCount',
      // addCount: 'addCount',
      // addCount(){
      //   return 0
      // },
    }),
    ...mapState(['count']),
    ...mapState({
      count2: state => state.count,
      count3: 'count',
      count4(state){
        return state.count + this.title
      },
      // doubleCount(state){
      //   return state.count * 2
      // },
    }),
  
  }
}
</script>

<style>

</style>